<template>
  <div class="ach-overlay" @click.self="onClose">
    <div class="ach-card">
      <div class="ach-header">
        <span class="title">成就系统</span>
        <d-button variant="solid" size="sm" @click="onClose">关闭</d-button>
      </div>
      <div class="ach-content" v-if="list.length">
        <div class="ach-item" v-for="a in list" :key="a.id">
          <div class="name">🏅 {{ a.name }}</div>
          <div class="desc">{{ a.description }}</div>
          <div class="time">{{ formatTime(a.earnedAt) }}</div>
        </div>
      </div>
      <div class="ach-empty" v-else>
        <span>暂无成就</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { useChallengeStore } from '@/store';
const emit = defineEmits(['close']);
const store = useChallengeStore();
const list = store.achievements;
const onClose = () => emit('close');
const formatTime = (ts: number) => dayjs(ts).format('YYYY-MM-DD HH:mm');
</script>

<style scoped lang="scss">
@import "devui-theme/styles-var/devui-var.scss";

.ach-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.35);
  z-index: 1000;
}
.ach-card {
  width: 700px;
  max-width: 92vw;
  border-radius: 12px;
  padding: 16px;
  background-color: $devui-base-bg;
  box-shadow: 0px 8px 24px rgba(25,25,25,0.18);
}
.ach-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.title { font-weight: 700; color: $devui-text; }
.ach-content { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ach-item { padding: 12px; border: 1px solid $devui-line; border-radius: 10px; background-color: $devui-label-bg; }
.name { font-weight: 600; color: $devui-text; }
.desc { color: $devui-text; margin-top: 4px; }
.time { color: $devui-aide-text; margin-top: 6px; font-size: $devui-font-size-sm; }
.ach-empty { text-align: center; color: $devui-aide-text; }
</style>